<template>
  <div id="nav">
    <nav>
      <div>
        <van-tabbar v-model="active" active-color="#f37d0f">
        <router-link :to="{ name: 'home' }" exact>
            <van-tabbar-item name="/m" icon="home-o">首页</van-tabbar-item>
          </router-link>

          <router-link :to="{ name: 'about' }">
            <van-tabbar-item name="/about" icon="search">分类</van-tabbar-item>
          </router-link>

          <router-link :to="{ name: 'shop' }">
            <van-tabbar-item name="/shop" icon="cart-circle-o">购物车</van-tabbar-item>
          </router-link>

          <router-link :to="{ name: 'my' }"
            ><van-tabbar-item name="/my" icon="contact">我的</van-tabbar-item></router-link
          >
        </van-tabbar>
      </div>
    </nav>
    <router-view />
  </div>
</template>
  <script>
export default {
  data() {
    return {
      active: "/m",
    };
  },
  methods:{
    //获取路由
    getrouter(){
      // console.log(this.$route.path);
      this.active =this.$route.path
    }
  },
  mounted(){
    this.getrouter()
  }
};
</script>
  <style lang="scss">
nav {
  width: 100%;
  height: 13.3333vw;
  padding: 0px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  border-top: 1px solid #eee;
  background-color: #fff;
  div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 4vw;
  }
  a {
    // font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #f37d0f;
    }
  }
  .van-tabbar-item__icon {
    margin: 0;
  }
  .van-tabbar-item--active{
    color: #f37d0f;
    background-color: #fff;
  }
}
</style>